<html xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body >

<div class="row wrapper wrapper-content animated fadeInRight">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>分类管理</h5>
                <div class="ibox-tools">
                    <input type="button" class="btn btn-primary" value="新增" onclick="add();">
                </div>
            </div>
            <div class="ibox-content" style="height: 100px">
                <div class="col-sm-4">
                    <div id="treeview12"></div>
                </div>
                <div class="col-sm-8">

                    <div class="ibox" id="menuinfo" style="display: none">
                        <div class="ibox-content">

                            <form class="form-horizontal m-t" id="form_search" >
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">上级：</label>
                                    <div class="col-sm-4">
                                        <select id="parent_id" name="parent_id" class="form-control">

                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">名称：</label>
                                    <div class="col-sm-4">
                                        <input id="menu_name" name="menu_name" placeholder="名称" value="" class="form-control">
                                        <input id="menu_id" name="menu_id" type=""hidden>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">编码：</label>
                                    <div class="col-sm-4">
                                        <input id="menu_code" name="menu_code" placeholder="编码" value="" class="form-control">
                                    </div>
                                </div>
                                <!--<div class="form-group">-->
                                    <!--<label class="col-sm-4 control-label">菜单URL：</label>-->
                                    <!--<div class="col-sm-4">-->
                                        <!--<input id="menu_url" name="menu_url" placeholder="菜单URL" value="" class="form-control">-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<label class="col-sm-4 control-label">菜单图表：</label>-->
                                    <!--<div class="col-sm-4"   style="display: inline;">-->
                                        <!--<input id="menu_icon" name="menu_icon" placeholder="菜单图表" value="" class="form-control">-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<div class="form-group">-->
                                    <!--<label class="col-sm-4 control-label">排序：</label>-->
                                    <!--<div class="col-sm-4">-->
                                        <!--<input id="sort_num" name="sort_num" placeholder="排序" value="" class="form-control">-->
                                    <!--</div>-->
                                <!--</div>-->

                                <!--<div class="form-group">-->
                                    <!--<label class="col-sm-4 control-label">是否有效：</label>-->
                                    <!--<div class="col-sm-4">-->
                                        <!--&lt;!&ndash;<input id="isvalid" name="isvalid" placeholder="是否有效" value="" class="form-control">&ndash;&gt;-->
                                        <!--<select  id="isvalid"  name="isvalid" class="form-control">-->
                                            <!--<option value="">请选择</option>-->
                                            <!--<option value="1">有效</option>-->
                                            <!--<option value="0">无效</option>-->
                                        <!--</select>-->
                                    <!--</div>-->
                                <!--</div>-->
                                <div class="form-group">
                                    <div class="col-sm-8" style="text-align: center">
                                        <input type="button" class="btn btn-primary" value="保存" onclick="save();">
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>

<script type="text/javascript">
    var index;
    $(function () {
        initdata();
    });


    function initdata(){
        layer.closeAll();
        $("#menuinfo").hide();
        $.ajax({
            type: "POST",
            url: "/getCategoryTree",
            data: {
            },
            async: false,
            success: function (res) {
                var menuList = res.data.menuList;
                $("#parent_id").html("");
                var apt = "<option value=''>无</option>";
                $.each(menuList,function(i,n){
                    apt += "<option value='"+n.id+"'>"+n.name+"</option>";
                });
                $("#parent_id").html(apt);

                var defaultData = res.data.tree;
                $('#treeview12').treeview({
                    color: "#428bca",
                    data: defaultData,
                    // showIcon: false,
                    // showCheckbox: true,
                    onNodeSelected: function (event, node) {

                        $("#menuinfo").show();
                        $.ajax({
                            type: "POST",
                            url: "/getCategory",
                            data: {
                                id:node.id
                            },
                            success: function (res) {
                                var data = res.data;
                                $("#menu_id").val(data.id);
                                $("#menu_name").val(data.name);
                                $("#menu_code").val(data.code);
                                // $("#menu_url").val(data.url);
                                // $("#menu_icon").val(data.icon);
                                // $("#sort_num").val(data.sortNum);
                                // if(data.isvalid == 0  ){
                                //     $("select[name='isvalid']").val("0");
                                // }else{
                                //     $("select[name='isvalid']").val("1");
                                // }

                                if(data.parentId != null && data.parentId != "" ){
                                    $("select[name='parent_id']").val(data.parentId);
                                }else{
                                    $("select[name='parent_id']").val("");
                                }
                            }
                        })


                    }
                });
            }
        })
    }

    function add() {
        $("#menuinfo").hide();
        $('#menu_id').val('');
        $("[name='parent_id']").val('');
        $('#menu_name').val('');
        $('#menu_code').val('');
        // $('#menu_url').val('');
        // $('#menu_icon').val('');
        // $('#sort_num').val('');
        // $("[name='isvalid']").val('1');

        layer.open({
            type: 1,
            title:"新增菜单",
            shadeClose: true,
            shade: false,
            area: ['800px', '450px'],
            content: $('#menuinfo') //这里content是一个DOM，这个元素要放在body根节点下
        });

    }

    function viewIcon() {
        index = layer.open({
            type: 1,
            title:"图标",
            shadeClose: true,
            shade: false,
            area: ['800px', '450px'],
            index:999,
            content: $('#allicon') //这里content是一个DOM，这个元素要放在body根节点下
        });
    }
    function save() {
        var menu_id = $('#menu_id').val();
        var parent_id = $("[name='parent_id']").val();
        var menu_name = $('#menu_name').val();
        var menu_code = $('#menu_code').val();

        // var menu_url = $('#menu_url').val();
        // var menu_icon = $('#menu_icon').val();
        // var sort_num = $('#sort_num').val();
        // var isvalid = $("[name='isvalid']").val()

        $.ajax({
            type: "POST",
            url: "/saveCategory",
            data: {
                id:menu_id,
                parentId:parent_id,
                name:menu_name,
                code:menu_code
                // url:menu_url,
                // icon:menu_icon,
                // sortNum:sort_num,
                // isvalid:isvalid
            },
            async: false,
            success: function (res) {
                if(res.result==1){
                    alert("保存成功");
                    initdata();
                }else{
                    alert(res.message);
                }
            }
        })

    }
</script>
</body>

</html>